React Maxsus Hook Holat Mashinasi: Murakkab Holat Mantiqini Abstraksiyalashni O'zlashtirish

React ilovalari murakkablashib borgan sari, holatni boshqarish jiddiy muammoga aylanishi mumkin. `useState` va `useEffect` yordamidagi an'anaviy yondashuvlar, ayniqsa, murakkab holat o'tishlari va qo'shimcha effektlar bilan ishlaganda, tezda chigal mantiqqa va qo'llab-quvvatlash qiyin bo'lgan kodga olib kelishi mumkin. Aynan shu yerda holat mashinalari va ularni amalga oshiruvchi React maxsus hook'lari yordamga keladi. Ushbu maqola sizni holat mashinalari tushunchasi bilan tanishtiradi, ularni React'da maxsus hook'lar sifatida qanday amalga oshirishni ko'rsatadi va global auditoriya uchun kengaytiriladigan va qo'llab-quvvatlanadigan ilovalar yaratishda ular taqdim etadigan afzalliklarni tasvirlab beradi.

Holat Mashinasi Nima?

Holat mashinasi (yoki chekli holat mashinasi, FSM) bu tizimning xatti-harakatini cheklangan miqdordagi holatlar va bu holatlar o'rtasidagi o'tishlarni aniqlash orqali tavsiflovchi hisoblashning matematik modelidir. Buni blok-sxema kabi tasavvur qiling, ammo qat'iyroq qoidalar va rasmiyroq ta'rifga ega. Asosiy tushunchalarga quyidagilar kiradi:

• Holatlar: Tizimning turli shartlari yoki bosqichlarini ifodalaydi.
• O'tishlar: Muayyan hodisalar yoki shartlarga asoslanib tizimning bir holatdan ikkinchisiga qanday o'tishini belgilaydi.
• Hodisalar: Holat o'tishlariga sabab bo'ladigan triggerlar.
• Boshlang'ich holat: Tizim ishga tushadigan holat.

Holat mashinalari aniq belgilangan holatlar va aniq o'tishlarga ega bo'lgan tizimlarni modellashtirishda ajoyib natija beradi. Haqiqiy hayotdagi stsenariylarda ko'plab misollar mavjud:

• Svetoforlar: Qizil, Sariq, Yashil kabi holatlar bo'ylab aylanadi, o'tishlar taymerlar tomonidan boshqariladi. Bu global miqyosda tan olingan misoldir.
• Buyurtmani qayta ishlash: Elektron tijorat buyurtmasi "Kutilmoqda," "Qayta ishlanmoqda," "Jo'natildi," va "Yetkazib berildi" kabi holatlardan o'tishi mumkin. Bu onlayn chakana savdoda universal qo'llaniladi.
• Autentifikatsiya oqimi: Foydalanuvchi autentifikatsiyasi jarayoni "Tizimdan chiqilgan," "Tizimga kirilmoqda," "Tizimga kirilgan," va "Xatolik" kabi holatlarni o'z ichiga olishi mumkin. Xavfsizlik protokollari odatda mamlakatlar bo'ylab bir xil bo'ladi.

Nima uchun React'da Holat Mashinalaridan Foydalanish Kerak?

Holat mashinalarini React komponentlaringizga integratsiya qilish bir nechta jozibali afzalliklarni taqdim etadi:

• Kod Tashkilotining Yaxshilanishi: Holat mashinalari holatni boshqarishga tizimli yondashuvni talab qiladi, bu esa kodingizni yanada bashorat qilinadigan va tushunish oson bo'lishiga olib keladi. Endi tartibsiz kodga o'rin yo'q!
• Murakkablikning Kamayishi: Holatlar va o'tishlarni aniq belgilash orqali siz murakkab mantiqni soddalashtirishingiz va kutilmagan qo'shimcha effektlardan qochishingiz mumkin.
• Testlash Imkoniyatining Oshishi: Holat mashinalari tabiatan testlanuvchandir. Har bir holat va o'tishni sinovdan o'tkazish orqali tizimingiz to'g'ri ishlashini osongina tekshirishingiz mumkin.
• Qo'llab-quvvatlashning Osonlashishi: Holat mashinalarining deklarativ tabiati ilovangiz rivojlanib borgan sari kodingizni o'zgartirish va kengaytirishni osonlashtiradi.
• Yaxshiroq Vizualizatsiyalar: Holat mashinalarini vizualizatsiya qila oladigan vositalar mavjud bo'lib, ular tizimingiz xatti-harakatlarining aniq tasavvurini beradi va turli malakaga ega jamoalar o'rtasidagi hamkorlik va tushunishga yordam beradi.

Holat Mashinasini React Maxsus Hook'i Sifatida Amalga Oshirish

Keling, React maxsus hook'i yordamida holat mashinasini qanday amalga oshirishni ko'rib chiqamiz. Biz `idle`, `loading` va `success` kabi uchta holatda bo'lishi mumkin bo'lgan tugma misolini yaratamiz. Tugma `idle` holatida ishga tushadi. Bosilganda, u `loading` holatiga o'tadi, yuklash jarayonini simulyatsiya qiladi (`setTimeout` yordamida) va keyin `success` holatiga o'tadi.

1. Holat Mashinasini Aniqlash

Birinchi navbatda, tugmamizning holat mashinasi uchun holatlar va o'tishlarni aniqlab olamiz:

const buttonStateMachineDefinition = {
  initial: 'idle',
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success', // 2 soniyadan so'ng, success holatiga o'tish
      },
    },
    success: {},
  },
};

Ushbu konfiguratsiya holat mashinasini aniqlash uchun kutubxonadan mustaqil (garchi XState'dan ilhomlangan bo'lsa ham) yondashuvdan foydalanadi. Biz ushbu ta'rifni maxsus hook'da o'zimiz izohlash uchun mantiqni amalga oshiramiz. `initial` xususiyati boshlang'ich holatni `idle` ga o'rnatadi. `states` xususiyati mumkin bo'lgan holatlarni (`idle`, `loading` va `success`) va ularning o'tishlarini aniqlaydi. `idle` holatida `CLICK` hodisasi yuz berganda `loading` holatiga o'tishni belgilaydigan `on` xususiyati mavjud. `loading` holati 2000 millisoniya (2 soniya) dan so'ng avtomatik ravishda `success` holatiga o'tish uchun `after` xususiyatidan foydalanadi. `success` holati bu misolda yakuniy holatdir.

2. Maxsus Hook'ni Yaratish

Endi, holat mashinasi mantiqini amalga oshiradigan maxsus hook'ni yaratamiz:

import { useState, useEffect } from 'react';

const useStateMachine = (stateMachineDefinition) => {
  const [currentState, setCurrentState] = useState(stateMachineDefinition.initial);
  const [context, setContext] = useState({});

  const transition = (event) => {
    const stateDefinition = stateMachineDefinition.states[currentState];
    if (stateDefinition && stateDefinition.on && stateDefinition.on[event]) {
      setCurrentState(stateDefinition.on[event]);
    }
  };

  useEffect(() => {
    const stateDefinition = stateMachineDefinition.states[currentState];
    if (stateDefinition && stateDefinition.after) {
      const timeoutKeys = Object.keys(stateDefinition.after);
      timeoutKeys.forEach(timeoutKey => {
        const timeout = parseInt(timeoutKey, 10);
        const nextState = stateDefinition.after[timeoutKey];
        const timer = setTimeout(() => {
          setCurrentState(nextState);
          clearTimeout(timer);
        }, timeout);

        return () => clearTimeout(timer); // Komponent o'chirilganda yoki holat o'zgarganda tozalash
      });
    }
  }, [currentState, stateMachineDefinition.states]);

  return {
    currentState,
    context,
    transition,
  };
};

export default useStateMachine;

Ushbu `useStateMachine` hook'i argument sifatida holat mashinasi ta'rifini qabul qiladi. U joriy holatni va kontekstni (kontekstni keyinroq tushuntiramiz) boshqarish uchun `useState` dan foydalanadi. `transition` funksiyasi argument sifatida hodisani qabul qiladi va holat mashinasi ta'rifida belgilangan o'tishlarga asoslanib joriy holatni yangilaydi. `useEffect` hook'i `after` xususiyatini boshqaradi, belgilangan muddatdan so'ng avtomatik ravishda keyingi holatga o'tish uchun taymerlarni o'rnatadi. Hook joriy holatni, kontekstni va `transition` funksiyasini qaytaradi.

3. Maxsus Hook'ni Komponentda Ishlatish

Nihoyat, maxsus hook'ni React komponentida ishlatamiz:

import React from 'react';
import useStateMachine from './useStateMachine';

const buttonStateMachineDefinition = {
  initial: 'idle',
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success', // 2 soniyadan so'ng, success holatiga o'tish
      },
    },
    success: {},
  },
};

const MyButton = () => {
  const { currentState, transition } = useStateMachine(buttonStateMachineDefinition);

  const handleClick = () => {
    if (currentState === 'idle') {
      transition('CLICK');
    }
  };

  let buttonText = 'Meni bosing';
  if (currentState === 'loading') {
    buttonText = 'Yuklanmoqda...';
  } else if (currentState === 'success') {
    buttonText = 'Muvaffaqiyatli!';
  }

  return (
    
      {buttonText}
    
  );
};

export default MyButton;

Ushbu komponent tugma holatini boshqarish uchun `useStateMachine` hook'idan foydalanadi. `handleClick` funksiyasi tugma bosilganda (va faqat `idle` holatida bo'lsa) `CLICK` hodisasini yuboradi. Komponent joriy holatga qarab turli xil matnlarni chiqaradi. Bir nechta bosishlarni oldini olish uchun yuklanish paytida tugma o'chiriladi.

Holat Mashinalarida Kontekstni Boshqarish

Ko'pgina real hayotdagi stsenariylarda, holat mashinalari holat o'tishlari davomida saqlanib qoladigan ma'lumotlarni boshqarishi kerak. Ushbu ma'lumotlar kontekst deb ataladi. Kontekst sizga holat mashinasi rivojlanib borishi bilan tegishli ma'lumotlarni saqlash va yangilash imkonini beradi.

Keling, tugma misolimizni har safar muvaffaqiyatli yuklanganda ortib boradigan hisoblagichni qo'shish uchun kengaytiramiz. Biz kontekstni boshqarish uchun holat mashinasi ta'rifini va maxsus hook'ni o'zgartiramiz.

1. Holat Mashinasi Ta'rifini Yangilash

const buttonStateMachineDefinition = {
  initial: 'idle',
  context: {
    count: 0,
  },
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success',
      },
    },
    success: {
      entry: (context) => {
        return { ...context, count: context.count + 1 };
      },
    },
  },
};

Biz holat mashinasi ta'rifiga boshlang'ich `count` qiymati 0 bo'lgan `context` xususiyatini qo'shdik. Shuningdek, `success` holatiga `entry` amalini qo'shdik. `entry` amali holat mashinasi `success` holatiga kirganda bajariladi. U joriy kontekstni argument sifatida qabul qiladi va `count` orttirilgan yangi kontekstni qaytaradi. Bu yerdagi `entry` kontekstni o'zgartirish misolini ko'rsatadi. Javascript obyektlari havola orqali uzatilganligi sababli, asl nusxani o'zgartirish o'rniga *yangi* obyektni qaytarish muhimdir.

2. Maxsus Hook'ni Yangilash

import { useState, useEffect } from 'react';

const useStateMachine = (stateMachineDefinition) => {
  const [currentState, setCurrentState] = useState(stateMachineDefinition.initial);
  const [context, setContext] = useState(stateMachineDefinition.context || {});

  const transition = (event) => {
    const stateDefinition = stateMachineDefinition.states[currentState];
    if (stateDefinition && stateDefinition.on && stateDefinition.on[event]) {
      setCurrentState(stateDefinition.on[event]);
    }
  };

  useEffect(() => {
    const stateDefinition = stateMachineDefinition.states[currentState];

    if(stateDefinition && stateDefinition.entry){
      const newContext = stateDefinition.entry(context);
      setContext(newContext);
    }

    if (stateDefinition && stateDefinition.after) {
      const timeoutKeys = Object.keys(stateDefinition.after);
      timeoutKeys.forEach(timeoutKey => {
        const timeout = parseInt(timeoutKey, 10);
        const nextState = stateDefinition.after[timeoutKey];
        const timer = setTimeout(() => {
          setCurrentState(nextState);
          clearTimeout(timer);
        }, timeout);

        return () => clearTimeout(timer); // Komponent o'chirilganda yoki holat o'zgarganda tozalash
      });
    }
  }, [currentState, stateMachineDefinition.states, context]);

  return {
    currentState,
    context,
    transition,
  };
};

export default useStateMachine;

Biz `useStateMachine` hook'ini `context` holatini `stateMachineDefinition.context` bilan yoki kontekst berilmagan bo'lsa, bo'sh obyekt bilan ishga tushirish uchun yangiladik. Shuningdek, `entry` amalini boshqarish uchun `useEffect` qo'shdik. Joriy holatda `entry` amali mavjud bo'lganda, biz uni bajaramiz va kontekstni qaytarilgan qiymat bilan yangilaymiz.

3. Yangilangan Hook'ni Komponentda Ishlatish

import React from 'react';
import useStateMachine from './useStateMachine';

const buttonStateMachineDefinition = {
  initial: 'idle',
  context: {
    count: 0,
  },
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success',
      },
    },
    success: {
      entry: (context) => {
        return { ...context, count: context.count + 1 };
      },
    },
  },
};

const MyButton = () => {
  const { currentState, context, transition } = useStateMachine(buttonStateMachineDefinition);

  const handleClick = () => {
    if (currentState === 'idle') {
      transition('CLICK');
    }
  };

  let buttonText = 'Meni bosing';
  if (currentState === 'loading') {
    buttonText = 'Yuklanmoqda...';
  } else if (currentState === 'success') {
    buttonText = 'Muvaffaqiyatli!';
  }

  return (
    

      
        {buttonText}
      
      
Sanoq: {context.count}
    
  );
};

export default MyButton;

Endi biz komponentda `context.count` ga kiramiz va uni ko'rsatamiz. Har safar tugma muvaffaqiyatli yuklanganda, sanoq ortib boradi.

Holat Mashinalarining Ilg'or Konsepsiyalari

Bizning misolimiz nisbatan sodda bo'lsa-da, holat mashinalari ancha murakkab stsenariylarni ham boshqara oladi. Quyida ko'rib chiqish uchun ba'zi ilg'or tushunchalar keltirilgan:

• Qo'riqchilar (Guards): O'tish sodir bo'lishi uchun bajarilishi kerak bo'lgan shartlar. Masalan, o'tish faqat foydalanuvchi autentifikatsiyadan o'tgan bo'lsa yoki ma'lum bir ma'lumot qiymati chegaradan oshib ketsa ruxsat etilishi mumkin.
• Amallar (Actions): Holatga kirish yoki chiqishda bajariladigan qo'shimcha effektlar. Bular API chaqiruvlarini amalga oshirish, DOM'ni yangilash yoki boshqa komponentlarga hodisalarni yuborishni o'z ichiga olishi mumkin.
• Parallel Holatlar: Bir nechta bir vaqtda sodir bo'ladigan faoliyatlarga ega tizimlarni modellashtirish imkonini beradi. Masalan, videopleyerda ijro etishni boshqarish (play, pause, stop) uchun bir holat mashinasi va video sifatini boshqarish (past, o'rta, yuqori) uchun boshqasi bo'lishi mumkin.
• Ierarxik Holatlar: Holatlarni boshqa holatlar ichiga joylashtirish imkonini beradi, bu esa holatlar ierarxiyasini yaratadi. Bu ko'plab bog'liq holatlarga ega murakkab tizimlarni modellashtirish uchun foydali bo'lishi mumkin.

Alternativ Kutubxonalar: XState va Boshqalar

Bizning maxsus hook'imiz holat mashinasining asosiy amalga oshirilishini ta'minlasa-da, jarayonni soddalashtiradigan va yanada ilg'or xususiyatlarni taklif qiladigan bir nechta ajoyib kutubxonalar mavjud.

XState

XState — bu holat mashinalari va holat jadvallarini yaratish, izohlash va bajarish uchun mashhur JavaScript kutubxonasi. U qo'riqchilar, amallar, parallel holatlar va ierarxik holatlarni qo'llab-quvvatlashni o'z ichiga olgan murakkab holat mashinalarini aniqlash uchun kuchli va moslashuvchan API'ni taqdim etadi. XState shuningdek, holat mashinalarini vizualizatsiya qilish va tuzatish uchun ajoyib vositalarni taklif etadi.

Boshqa Kutubxonalar

Boshqa variantlarga quyidagilar kiradi:

• Robot: Sodda va samaradorlikka e'tibor qaratgan yengil holatni boshqarish kutubxonasi.
• react-automata: Holat mashinalarini React komponentlariga integratsiya qilish uchun maxsus ishlab chiqilgan kutubxona.

Kutubxona tanlovi loyihangizning o'ziga xos ehtiyojlariga bog'liq. XState murakkab holat mashinalari uchun yaxshi tanlov bo'lsa, Robot va react-automata soddaroq stsenariylar uchun mos keladi.

Holat Mashinalaridan Foydalanish bo'yicha Eng Yaxshi Amaliyotlar

React ilovalaringizda holat mashinalaridan samarali foydalanish uchun quyidagi eng yaxshi amaliyotlarni ko'rib chiqing:

• Kichikdan Boshlang: Oddiy holat mashinalari bilan boshlang va kerak bo'lganda asta-sekin murakkablikni oshiring.
• Holat Mashinangizni Vizualizatsiya Qiling: Holat mashinangizning xatti-harakatlarini aniq tushunish uchun vizualizatsiya vositalaridan foydalaning.
• Keng Qamrovli Testlar Yozing: Tizimingiz to'g'ri ishlashiga ishonch hosil qilish uchun har bir holat va o'tishni sinchkovlik bilan sinovdan o'tkazing.
• Holat Mashinangizni Hujjatlashtiring: Holat mashinangizning holatlari, o'tishlari, qo'riqchilari va amallarini aniq hujjatlashtiring.
• Xalqarolashtirishni (i18n) Hisobga Oling: Agar ilovangiz global auditoriyaga mo'ljallangan bo'lsa, holat mashinasi mantig'ingiz va foydalanuvchi interfeysi to'g'ri xalqarolashtirilganligiga ishonch hosil qiling. Masalan, foydalanuvchining joylashuviga qarab turli sana formatlari yoki valyuta belgilarini boshqarish uchun alohida holat mashinalari yoki kontekstdan foydalaning.
• Foydalanish Imkoniyati (a11y): Holat o'tishlaringiz va UI yangilanishlaringiz nogironligi bo'lgan foydalanuvchilar uchun qulay ekanligiga ishonch hosil qiling. Yordamchi texnologiyalarga to'g'ri kontekst va fikr-mulohazalarni taqdim etish uchun ARIA atributlari va semantik HTML'dan foydalaning.

Xulosa

React maxsus hook'lari holat mashinalari bilan birgalikda React ilovalarida murakkab holat mantiqini boshqarish uchun kuchli va samarali yondashuvni taqdim etadi. Holat o'tishlari va qo'shimcha effektlarni aniq belgilangan modelga abstraksiyalash orqali siz kod tashkilotini yaxshilashingiz, murakkablikni kamaytirishingiz, testlash imkoniyatini oshirishingiz va qo'llab-quvvatlashni osonlashtirishingiz mumkin. O'zingizning maxsus hook'ingizni amalga oshirasizmi yoki XState kabi kutubxonadan foydalanasizmi, holat mashinalarini React ish jarayoningizga kiritish butun dunyodagi foydalanuvchilar uchun ilovalaringizning sifati va kengayuvchanligini sezilarli darajada yaxshilashi mumkin.